<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>管理端活动</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script src="../layui/layui.js"></script>
  <script type="text/javascript" src="../js/basic.js"></script>
  <link rel="stylesheet" href="../css/basic.css">
  <style>
    .btn-wrap{
      margin:5px 20px;
    }
    .btn-wrap>button{
      float: right;
      margin: 0 10px;
    }  
  </style>
</head>
<body>
<script>
!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.9),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))}),x(i)}var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout=function(){y.x=null,y.y=null};for(var s=[],f=0;d.n>f;f++){var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})}u=s.concat([y]),setTimeout(function(){i()},100)}();
</script>
  <div class="layui-col-sm8 layui-col-sm-offset2">
    <div class="btn-wrap layui-clear">
      <button id="addCounter" class="add-counter layui-btn layui-btn-normal">发布活动</button>
    </div>
    
    <!-- 表格信息 -->
    <table id="table" lay-filter="table"></table>
    
  </div>
</body>
<!--发布活动信息-->
<form id="addActivity" class="layui-form bs-hidden fm-in" lay-filter="addActivity" action="UploadServlet" method="post" enctype="multipart/form-data">
  <div class="layui-form-item">
      <label class="layui-form-label">活动代号：</label>
      <div class="layui-input-block">
          <input type="text" name="act_no" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动名称：</label>
      <div class="layui-input-block">
          <input type="text" name="act_name" required  lay-verify="required" placeholder="请输入活动名称" autocomplete="off" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动地点：</label>
      <div class="layui-input-block">
          <input type="text" name="act_loc" required  lay-verify="required" placeholder="请输入活动地点" autocomplete="off" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">开始时间：</label>
      <div class="layui-input-block">
        <input type="text" name="act_start" id="act_start" lay-filter="act_start" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">截止时间：</label>
    <div class="layui-input-block">
      <input type="text" name="act_end" id="act_end" lay-filter="act_end" class="layui-input">
    </div>
</div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动介绍：</label>
      <div class="layui-input-block">
        <textarea name="act_intro" placeholder="请输入内容" class="layui-textarea"></textarea>
      </div>
  </div>
  
  <div class="layui-form-item">       
          <label class="layui-form-label">活动图片：</label>
          <div class="layui-input-block">
			<div style="height:200px">
				<div style="width:150px;height:150px;border:1px solid gray;margin:10px">
				<img  src="" id="preview" />
				</div>
				    <input type="file" name="applyImg" onchange="viewImage(this)"/>
			    </div>
		</div>
  </div>
  
  <div class="layui-form-item">
      <div class="layui-input-block btn-center">
          <button class="layui-btn" lay-submit lay-filter="addPwd">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
  </div>
</form>

<!-- 修改活动信息 -->
<form id="updateActivity" class="layui-form bs-hidden fm-in" lay-filter="updateActivity">
  <div class="layui-form-item">
      <label class="layui-form-label">活动代号：</label>
      <div class="layui-input-block">
          <input type="text" name="act_noD" id="act_noD" class="layui-input" readonly required  lay-verify="required" autocomplete="off" >
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动名称：</label>
      <div class="layui-input-block">
          <input type="text" name="act_nameD" id="act_nameD" required  lay-verify="required" placeholder="请输入活动名称" autocomplete="off" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动地点：</label>
      <div class="layui-input-block">
          <input type="text" name="act_locD" id="act_locD" required  lay-verify="required" placeholder="请输入活动地点" autocomplete="off" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">开始时间：</label>
      <div class="layui-input-block">
        <input type="text" name="act_startD" id="act_startD" lay-filter="act_start" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">截止时间：</label>
    <div class="layui-input-block">
      <input type="text" name="act_endD" id="act_endD" lay-filter="act_end" class="layui-input">
    </div>
</div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动介绍：</label>
      <div class="layui-input-block">
        <textarea name="act_introD" id="act_introD"  placeholder="请输入内容" class="layui-textarea"></textarea>
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动图片：</label>
      <div class="layui-input-block">
        <img src="../img/触角动漫.jpg" id="act_picD" style="width:150px;height:150px;border:1px solid gray;margin:10px">
      </div>
  </div>
  <div class="layui-form-item">
      <div class="layui-input-block btn-center">
          <button class="layui-btn" lay-submit lay-filter="updatePwd">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
  </div>
</form>

<span class="bs-hidden" id="SocNo"></span>

<!-- 表格里的操作按钮 -->
<script type="text/html" id="ipts">
  <a lay-event="edit" class="layui-btn layui-btn-xs">编辑</a>
  <a lay-event="del" class="layui-btn layui-btn-xs">删除</a>
</script>

<script>
	layui.use(['laydate','table', 'layer', 'jquery','form'], function () {
	var laydate = layui.laydate;
	var table = layui.table;
	var layer = layui.layer;
	var $ = layui.jquery;
	var form = layui.form;
	var mydate = new Date();
	var dataNow = mydate.toLocaleDateString();
	//第一个实例
	$.ajax({
	  	type:"POST",
	  	url:"/user/getManUser", //通过session获取当前Society
	  	dataType:"json",
	  	error:function(){
	  		console.log("error!");
	  	},
	  	success:function(data){
	  		console.log(data);
	  		$('#SocNo').html(data.soc_no);  
	  	//	alert($('#SocNo').text());
	  		searchAll();
	  	}
	})
	
	function searchAll(){  //查询当前社团所有活动
		$.ajax({
			type:"GET",
			url:"/manager/serchMyActivity",
			data:{"soc_no":$('#SocNo').text()},//写完登录后更改
			dataType:"json",
			error:function(){
				alert("error!");
			},
			success:function(data){
				console.log(data);
				//注入动态表格
				showTable(data);	
			}
		})  	  
	}//searchAll();
	
	function showTable(tableData){
	  table.render({
	    id: 'tableImp',
	    elem: '#table',
	    page: true,//开启分页
	    cols: [
	        [//表头
	          {
	            field: 'act_no',
	            title: '活动号',
	            width: '10%',
	            sort: true,
	            fixed: 'left',
	            align: 'center'
	          }, {
	            field: 'act_name',
	            title: '活动名称',
	            width: '10%',
	            align: 'center'
	          }, {
	            field: 'act_loc',
	            title: '活动地点',
	            width: '13%',
	            align: 'center'
	          },  {
	            field: 'act_start',
	            title: '开始时间',
	            width: '13%',
	            align: 'center',
	            templet: '#StartTime'
	          },{
	            field: 'act_end',
	            title: '截止时间',
	            width: '13%',
	            align: 'center',
	            templet: '#EndTime'
	          },{
	            field: 'act_intro',
	            title: '活动介绍',
	            width: '28%',
	            align: 'center'
	          },{
	            fixed: 'right',
	            title: '操作',
	            align: 'center',
	            width: '13%',
	            toolbar: '#ipts'
	          }
	        ]
	      ]
	      //加载数据
	      ,data:tableData
	  });
	}//showTable()

  table.on('tool(table)',function (obj) {  
	console.log(obj.data)
    var event = obj.event;
    if(event === 'edit') {
      layer.open({
        type: 1,
        closeBtn: 1,
        title: '修改活动信息',
        content: $('#updateActivity'),
        area: ['800px', '600px'],
        offset: '10px',
        success: function(layero, index){
            console.log(layero, index);
			$('#act_noD').val(obj.data.act_no);
			$('#soc_noD').val(obj.data.soc_no);
			$('#act_nameD').val(obj.data.act_name);
			$('#act_locD').val(obj.data.act_loc);
			$('#act_startD').val(dateFormat(obj.data.act_start));
			$('#act_endD').val(dateFormat(obj.data.act_end));
			$('#act_introD').val(obj.data.act_intro);	
			$("#act_picD").attr("src",obj.data.act_pic);
            
          }
      })
    }
    //删除
    else if(event === 'del') {
        layer.open({
          type:1,
          closeBtn: 0,
          title:"提示信息",
          content:"<span style='font-size:20px; margin-left:40px'>"+"真的要删除么？"+"</span>",
          area:['200px','150px'],
          offset: '10px',
          btn:['确定','取消'],
          btnAlign:'c',
          yes:function(index, layero){
        	  $.ajax({
          		type:"POST",
          		data:{
          			act_no:obj.data.act_no
          		},
          		url:"/manager/deleteActivity",
          		dataType:"json",
          		error:function(){
          			alert("error!");
          		},
          		success:function(data){
          			if(data == true){
          				layer.msg('删除成功!',{
          					time:1000
          				},function(){
          					layer.closeAll();
          				});
          				searchAll();
          				return false;
          			}else if(data == false){
          				layer.msg('删除失败!',{
          					time:1000
          				},function(){
          					layer.closeAll();
          				});
          				searchAll();
          				return false;
          			}
          		}	
          	})
          },
          btn2:function(index, layero){
              layer.close(index);
              return false;
          }
        })
    }
  })
  //新增
  $('#addCounter').click(function () {
    layer.open({
          title:'发布活动详情',
          type:1,
          content:$('#addActivity'),
          area:['800px','600px'],
          offset: '10px',
      });
  });

/*
  //监听发布活动提交
  form.on('submit(addPwd)', function(data){
	  console.log(data.field);
	    $.ajax({
	    	type:"GET",
	    	url:"/manager/saveActivity",
	    	data:{
	    		act_name:data.field.act_name,
	    		act_loc:data.field.act_loc,
	    		act_start:data.field.act_start,
	    		act_end:data.field.act_end,
	    		act_intro:data.field.act_intro,
	    		act_no:data.field.act_no,
	    		act_public:"1",
	    		soc_no:$('#SocNo').text()
	    	},
	    	error:function(){
	    		alert("error!");
	    	},
	    	success:function(data){
	    		console.log(data);
	    		if(data == true){
	    			layer.msg('发布成功!',{
	    				time:1000
	    			},function(){
	    				layer.closeAll();
	    			});
	    			searchAll();
	    			return false;
	    		}else if(data == false){
	    			layer.msg('发布失败!',{
	    				time:1000
	    			},function(){
	    				layer.closeAll();
	    			});
	    			searchAll();
	    			return false;
	    		}
	    	}	
	    })   
    return false;
  });
 */
  //监听修改活动提交
 form.on('submit(updatePwd)', function(data){
	console.log(data.field);
    $.ajax({
    	type:"GET",
    	url:"/manager/changeActivityMessage",
    	data:{
    		act_name:data.field.act_nameD,
    		act_loc:data.field.act_locD,
    		act_start:data.field.act_startD,
    		act_end:data.field.act_endD,
    		act_intro:data.field.act_introD,
    		act_no:data.field.act_noD,
    		act_public:"1",
    		soc_no:$('#SocNo').text()
    	},
    	error:function(){
    		alert("error!");
    	},
    	success:function(data){
    		console.log(data);
    		if(data == true){
    			layer.msg('修改成功!',{
    				time:1000
    			},function(){
    				layer.closeAll();
    			});
    			searchAll();
    			return false;
    		}else if(data == false){
    			layer.msg('修改失败!',{
    				time:1000
    			},function(){
    				layer.closeAll();
    			});
    			searchAll();
    			return false;
    		}
    	}	
    }) 
    return false;
  }); 
  
  
	//执行一个laydate实例
	laydate.render({
	  elem: '#act_start' //指定元素
	  ,format:"yyyy-MM-dd"
	});
	
	laydate.render({
		 elem: '#act_end' //指定元素
		,format:"yyyy-MM-dd"
	});
})
</script>

<script type="text/html" id="StartTime">  
  		{{dateFormat(d.act_start) }}
</script>
<script type="text/html" id="EndTime">  
		{{dateFormat(d.act_end) }}
</script>
</script>
	<script type="text/javascript">
	    //图片预览
		function viewImage(file){
			var preview = document.getElementById('preview');
	        if(file.files && file.files[0]){
	            //火狐下
	            preview.style.display = "block";
	            preview.style.width = "150px";
	            preview.style.height = "150px";
	            preview.src = window.URL.createObjectURL(file.files[0]);
	        }else{
	            //ie下，使用滤镜
	            file.select();
	            var imgSrc = document.selection.createRange().text;
	            var localImagId = document.getElementById("localImag"); 
	            //必须设置初始大小 
	            localImagId.style.width = "150px"; 
	            localImagId.style.height = "150px"; 
	            try{ 
	            localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
	            locem("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
	            }catch(e){ 
	            alert("您上传的图片格式不正确，请重新选择!"); 
	            return false; 
	            } 
	            preview.style.display = 'none'; 
	            document.selection.empty(); 
	            } 
	            return true; 
		}
	</script>
</html>

